<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/Vue.js"></script>
	</head>
	<style>
		.fade-enter-active,
		.fade-leave-active {
			transition: opacity .5s
		}
		
		.fade-enter,
		.fade-leave-to
		/* .fade-leave-active in below version 2.1.8 */
		
		{
			opacity: 0
		}
	</style>
	<script>
		//未挂载，只是实例化vue
		var unmounted = {
			//app 模块
			app: function() {
				return new Vue({
					data: {
						message: 'Hello Vue!'
					}
				})
			},
			//app2 模块
			app2: function() {
				return new Vue({
					data: {
						message: "标题显示"
					}
				})
			},
			//app3 模块
			app3: function() {
				return new Vue({
					data: {
						message: "请输入值"
					}
				})
			},
			//app4过度效果
			app4: function() {
				return new Vue({
					data: {
						show: true
					}
				})
			},
			//app5组件
			app5: function() {
				Vue.component("my-component", {
					template: "<div>这是一个组件创建的内容</div>"
				})
				new Vue({
					el: "#app5"
				})

			}
		}
	</script>

	<body>
		<div id="app">
			{{message}}
		</div>

		<div id="app2" v-bind:title="message">
			鼠标移动标题
		</div>
		<div id="app3">
			<input v-model="message" placeholder="edit me">
			<p>Message is: {{ message }}</p>
		</div>
		<div id="app4">
			<button v-on:click="show = !show">Toggle</button>
			<transition name="fade">
				<p v-if="show">hello</p>
			</transition>
		</div>
		<div id="app5">
			<my-component></my-component>
		</div>

		
		<script>
			//为vue实例加载元素启用操作
			unmounted.app().$mount("#app");
			unmounted.app2().$mount("#app2");
			unmounted.app3().$mount("#app3");
			unmounted.app4().$mount("#app4");
			unmounted.app5();
			function chage(){
				alert("值发生改变")
			}
				function edit(){
					document.getElementById("edit").value="456456";

			}
		</script>
	</body>

</html>